<script setup>
import FruitItem from '@/views/category/components/FruitItem.vue'
// 右侧折叠面板
import { ref } from 'vue'
import Recommend from '@/components/Recommend.vue'
import PageFooter from '@/components/PageFooter.vue'

const check = ref(false)
const fruitList = ref([
  {
    name: '西红柿',
    img: '/src/static/category/e1.png',
    desc: '丰富的胡萝卜素、维生素C和B族维生素'
  },
  {
    name: '生菜',
    img: '/src/static/category/e2.png',
    desc: '利五脏，开利胸膈，疏通经脉'
  },
  {
    name: '胡罗卜',
    img: '/src/static/category/e3.png',
    desc: '具有健脾和中，滋肝明目，清热解毒'
  },
  {
    name: '黄瓜',
    img: '/src/static/category/e4.png',
    desc: '葫芦素C具有提高人体免疫功能的作用'
  }
])
const foldIndex = ref(new Array(4).fill(false))
const handleFold = (index) => {
  foldIndex.value[index] = !foldIndex.value[index]
  console.log(foldIndex.value)
}
const fold1 = ref([
  {
    name: '热销水果',
    checked: false
  },
  {
    name: '地表水果',
    checked: false
  },
  {
    name: '时令水果',
    checked: false
  }
])
const fold2 = ref([
  { name: '西梅', checked: false },
  { name: '苹果', checked: false },
  { name: '梨子', checked: false },
  { name: '杏', checked: false },
  { name: '樱桃', checked: false },
  { name: '水蜜桃', checked: false },
  { name: '黑莓', checked: false },
  { name: '覆盆子', checked: false },
  { name: '葡萄柚', checked: false },
  { name: '柑橘', checked: false },
  { name: '橙子', checked: false },
  { name: '火龙果', checked: false },
  { name: '青柠', checked: false },
  { name: '柠檬', checked: false },
  { name: '金橘', checked: false },
  { name: '榴梿', checked: false },
  { name: '葡萄', checked: false },
  { name: '椰子', checked: false },
  { name: '香蕉', checked: false },
  { name: '牛油果', checked: false },
  { name: '芒果', checked: false }
])
const fold3 = ref([
  { name: '东北地区', checked: false },
  { name: '华东地区', checked: false },
  { name: '西北地区', checked: false },
  { name: '华北地区', checked: false },
  { name: '华中地区', checked: false },
  { name: '西南地区', checked: false },
  { name: '华南地区', checked: false }
])
/*const fruitList=ref([
  {
    img:'/src/static/category/1.png',
    name:'水果',
    desc:'菜同子 精选严选优品 新鲜水果',
    price:'9.9',
  },

])*/
const activePage = ref('B')

const handlePageChange = (value) => {
  console.log(value)
  if (value % 3 === 3) {
    activePage.value = 'B'
  } else if (value % 3 === 2) {
    activePage.value = 'c'
  } else {
    activePage.value = 'd'
  }
}
</script>

<template>
  <div>
    <div class="banner-img">
      <!--      <img src="" alt="图片展示区">-->
      <!--      <img src="" alt="图片展示区">-->
      <div class="banner-img-item">
        <img height="100%" src="/src/static/category/1.png" width="100%">
      </div>
      <div class="banner-img-item">
        <img height="100%" src="/src/static/category/2.png" width="100%">
      </div>
    </div>
    <div class="main">
      <!--     右侧分类 -->
      <div class="main-right">
        <div class="side-item" style="border-radius: 5px 5px 0  0" @click="handleFold(0)">
          生鲜超市
          <el-icon :style="{transform: foldIndex[0]?'rotate(90deg)':''}" color="#fff">
            <ArrowRightBold />
          </el-icon>
        </div>

        <div class="side-item" @click="handleFold(1)">
          新鲜水果
          <el-icon :style="{transform: foldIndex[1]?'rotate(90deg)':''}" color="#fff">
            <ArrowRightBold />
          </el-icon>
        </div>
        <div v-show="foldIndex[1]" class="side-item side-multiple">
          <div v-for="(item,index1) in fold1" :key="index1" class="side-multiple-item">{{ item.name }}
            <el-checkbox :checked="item.checked" label="" size="large" />
          </div>
          <div
            style="width: 100%;display: flex;justify-content: flex-start;align-items: center;gap: 5px;margin-bottom: 10px"
            @click="handleFold(2)">品种
            <el-icon :style="{transform: foldIndex[2]?'rotate(90deg)':''}" color="#333"
                     style="transition: all 0.2s ease-in-out">
              <ArrowRightBold />
            </el-icon>
          </div>
          <div v-show="foldIndex[2]" class="side-multiple fruit-m">
            <div v-for="(item,index2) in fold2" :key="index2" class="fruit-m-item">{{ item.name }}
              <el-checkbox label="" size="large" />
            </div>
          </div>
        </div>
        <div>
        </div>

        <div class="side-title" style="border-radius: 5px 5px 0  0" @click="handleFold(3)">
          <span style="margin-right: 5px">展开</span>
          <el-icon :style="{transform: foldIndex[3]?'rotate(90deg)':''}" color="#fff"
                   style="transition: all 0.2s ease-in-out">
            <DArrowRight />
          </el-icon>
        </div>
        <div v-show="foldIndex[3]" class=" side-multiple" style="border-radius: 0 0 5px 5px">
          <div style="width: 100%;height: 40px;display: flex;align-items: center;font-size: 16px;padding-left: 10px">
            原产地
          </div>
          <div v-for="item in fold3" :key="item" class="side-multiple-item">{{ item.name }}
            <el-checkbox label="" size="large" />
          </div>
        </div>
      </div>
      <!--     左侧水果列表 -->
      <div class="main-left">
        <div class="main-left-list">
          <div v-for="item in 20" :key="item" class="main-left-list-item">
            <FruitItem :url="'/src/static/category/'+activePage+item+'.png'"></FruitItem>
          </div>
        </div>

        <div style="margin-top: 50px;display: flex;justify-content: center;width: 100%">
          <el-pagination :total="1000" layout="prev, pager, next,slot" next-text="下一页" prev-text="上一页"
                         @change="handlePageChange" />
        </div>
      </div>
    </div>

    <Recommend :color="'#A9C58F'" :fruit-list="fruitList" :title="'严选优品'"></Recommend>
    <PageFooter></PageFooter>
  </div>
</template>

<style lang="scss" scoped>
.banner-img {
  background: #ffffff;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0 0;

  &-item {
    width: 45%;
    height: 98%;
    display: flex;
    margin-left: 20px;
    justify-content: center;
    align-items: center;
    background-color: #bdbdbd;
    border-radius: 3px;
  }
}

.main {
  width: 100%;
  background-color: $fruit-category-main-bg-color;
  display: flex;
  padding: 10px 5% 80px 5%;
  font-weight: bold;

  &-right {
    flex: 1;
    margin-right: 40px;
    color: #333333;

    .side-item {
      padding: 10px;
      min-height: 30px;
      font-size: 16px;
      background: $fruit-main-color;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      border: #ffffff 1px solid;
      transition: all 0.2s ease-in-out;
    }

    .side-multiple {
      width: 100%;
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;

      &-item {
        width: 50%;
        padding-left: 10px;
        display: flex;
        align-items: center;
        gap: 5px;
      }
    }

    .fruit-m {
      background-color: $fruit-category-side-color;
      column-gap: 15px;
      row-gap: 10px;
      padding: 0 0 10px 10px;

      &-item {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
    }

    .side-title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      font-size: 18px;
      width: 100%;
      height: 30px;
      background-color: $fruit-category-side-title;
      color: #F56C6C;
    }
  }

  &-left {
    flex: 3;
    margin-top: 10px;
    display: flex;
    flex-direction: column;

    &-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr); // 5列等宽
      grid-template-rows: repeat(5, 1fr);
      grid-gap: 10px; // 列间距10px
      &-item {
        margin-right: 10px;
      }
    }
  }
}

.category-bottom {
  width: 100%;
  background-color: $fruit-category-bottom-bg-color;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  gap: 30px;

  &-item {
    width: 100%;
  }

  &-title {
    color: $fruit-category-bottom-title;
    font-size: 24px;
    font-weight: bold;
  }

  .title {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .line {
    width: 40%;
    border-top: 5px dotted #333333;
  }

  .content {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    &-item {
      width: 22%;
      background-color: $fruit-category-bottom-item-bg-color;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;
      border-radius: 10px;
      overflow: hidden;
      padding-bottom: 20px;
    }
  }

  .text {
    width: 100%;
    height: 200px;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 40px;

    &-item {
      position: relative;
      width: 30%;
      height: 80%;
      padding: 0 30px;
      display: flex;
      align-items: center;

      .v-line {
        width: 3px;
        height: 4.5rem;
        background-color: #bdbdbd;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }
  }
}
</style>